<template>
  <div class="content-tabs" ref="contentTabs">
    <div class="tab-nav">
      <div 
        v-for="tab in tabs" 
        :key="tab.id" 
        class="tab-nav-item" 
        :class="{ active: activeTab === tab.id }"
        @click="switchTab(tab.id)"
      >
        {{ tab.name }}
      </div>
    </div>
    
    <AssetModule v-if="activeTab === 'asset'" />
    <FinanceModule v-if="activeTab === 'finance'" />
    <MaterialModule v-if="activeTab === 'material'" />
    <ProfileModule v-if="activeTab === 'profile'" />
  </div>
</template>

<script>
import AssetModule from './modules/AssetModule.vue'
import FinanceModule from './modules/FinanceModule.vue'
import MaterialModule from './modules/MaterialModule.vue'
import ProfileModule from './modules/ProfileModule.vue'

export default {
  name: 'ContentTabs',
  components: {
    AssetModule,
    FinanceModule,
    MaterialModule,
    ProfileModule
  },
  data() {
    return {
      activeTab: 'asset',
      tabs: [
        { id: 'asset', name: '资产' },
        { id: 'finance', name: '财务' },
        { id: 'material', name: '物资' },
        { id: 'profile', name: '个人' }
      ]
    }
  },
  created() {
    // 从URL查询参数中获取选项卡ID
    const tabFromQuery = this.$route.query.tab
    if (tabFromQuery && this.tabs.some(tab => tab.id === tabFromQuery)) {
      this.activeTab = tabFromQuery
    }
  },
  mounted() {
    // 检查是否需要滚动到选项卡位置
    this.checkAndScrollToTab()
  },
  methods: {
    switchTab(tabId) {
      this.activeTab = tabId
      // 更新URL查询参数，不刷新页面
      this.$router.replace({
        query: { ...this.$route.query, tab: tabId }
      }).catch(() => {})
    },
    scrollToTabsComponent() {
      // 滚动到选项卡组件位置
      if (this.$refs.contentTabs) {
        this.$refs.contentTabs.scrollIntoView({ behavior: 'smooth', block: 'start' })
      }
    },
    checkAndScrollToTab() {
      // 如果URL中有scrollToTab参数，则滚动到选项卡位置
      if (this.$route.query.scrollToTab === 'true') {
        // 使用setTimeout确保DOM已完全渲染
        setTimeout(() => {
          this.scrollToTabsComponent()
          // 滚动完成后移除query参数，避免页面刷新后再次滚动
          this.$router.replace({
            query: { ...this.$route.query, scrollToTab: undefined }
          }).catch(() => {})
        }, 100)
      }
    }
  },
  watch: {
    // 监听路由变化，更新选项卡
    '$route.query.tab': function(newTabId) {
      if (newTabId && this.tabs.some(tab => tab.id === newTabId)) {
        this.activeTab = newTabId
      }
    },
    // 监听scrollToTab参数变化
    '$route.query.scrollToTab': function(newValue) {
      if (newValue === 'true') {
        this.checkAndScrollToTab()
      }
    }
  }
}
</script>

<style scoped>
.content-tabs {
  margin: 16px;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tab-nav {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}

.tab-nav-item {
  flex: 1;
  text-align: center;
  padding: 14px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}

.tab-nav-item.active {
  color: #1890ff;
  border-bottom-color: #1890ff;
}
</style> 